<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">
    <!-- 避免IE使用兼容模式 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>排版</title>
    <script type="text/javascript" src="./../../../static/js/include/_include-css.js"></script>
</head>

<body class="bg-gray">
    <div class="wrapper">
        <div class="wrapper-container">
            <div class="row">
                <div class="col-md-12">
                    <div class="panel">
                        <div class="panel-heading">
                            标题
                        </div>
                        <div class="panel-body">
                            <H1>H1.这是一个H1的一级标题<small>副标题</small></H1>
                            <H2>H2.这是一个H2的一级标题<small>副标题</small></H2>
                            <H3>H3.这是一个H3的一级标题<small>副标题</small></H3>
                            <H4>H4.这是一个H4的一级标题<small>副标题</small></H4>
                            <H5>H5.这是一个H5的一级标题<small>副标题</small></H5>
                            <H6>H6.这是一个H6的一级标题<small>副标题</small></H6>
                            <p><a href="javascript:;">链接文字</a></p>
                            <p><a href="javascript:;" class="href-line">Hover带横线的链接文字</a><code>.href-line</code></p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-12">
                    <div class="panel">
                        <div class="panel-heading">
                            段落样式
                        </div>
                        <div class="panel-body">
                            <div class="row">
                                <div class="col-md-4">
                                    <p><code>中心内容，在&lt;p&gt;标签中使用.lead</code></p>
                                    <p class="lead">明月几时有？把酒问青天。不知天上宫阙，今夕是何年。我欲乘风归去，又恐琼楼玉宇，高处不胜寒。起舞弄清影，何似在人间。</p>

                                </div>
                                <div class="col-md-4">
                                    <code>常规正文段落</code>
                                    <p>明月几时有？把酒问青天。不知天上宫阙，今夕是何年。我欲乘风归去，又恐琼楼玉宇，高处不胜寒。起舞弄清影，何似在人间。</p>
                                </div>
                                <div class="col-md-4">
                                    <p><code>小号文字段落，在&lt;p&gt;标签中使用.small</code></p>
                                    <p class="small">明月几时有？把酒问青天。不知天上宫阙，今夕是何年。我欲乘风归去，又恐琼楼玉宇，高处不胜寒。起舞弄清影，何似在人间。</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-12">
                    <div class="panel">
                        <div class="panel-heading">
                            内联文本元素
                        </div>
                        <div class="panel-body">
                            <div class="row">
                                <div class="col-md-12">
                                    <p>白茶清欢无别事，我在等风也等你。<mark>清酒独酌了无趣</mark>，我在梦花也梦你。<code>文本标记 &lt;mark&gt; 或 .mark</code>
                                    </p>
                                    <p><del>白茶清欢无别事，我在等风也等你。清酒独酌了无趣，我在梦花也梦你。</del><code>删除标记 &lt;del&gt;</code></p>
                                    <p><s>白茶清欢无别事，我在等风也等你。清酒独酌了无趣，我在梦花也梦你。</s><code>无用标记 &lt;s&gt;</code></p>
                                    <p><ins>白茶清欢无别事，我在等风也等你。清酒独酌了无趣，我在梦花也梦你。</ins><code>插入标记 &lt;ins&gt;</code></p>
                                    <p><u>白茶清欢无别事，我在等风也等你。清酒独酌了无趣，我在梦花也梦你。</u><code>下划线标记 &lt;u&gt;</code></p>
                                    <p><strong>白茶清欢无别事，我在等风也等你。清酒独酌了无趣，我在梦花也梦你。</strong><code>加粗文本 &lt;strong&gt;</code>
                                    </p>
                                    <p><em>白茶清欢无别事，我在等风也等你。清酒独酌了无趣，我在梦花也梦你。</em><code>斜体 &lt;em&gt;</code></p>
                                    <p><small>白茶清欢无别事，我在等风也等你。清酒独酌了无趣，我在梦花也梦你。</small><code>小号文本 &lt;small&gt;或.small</code>
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-12">
                    <div class="panel">
                        <div class="panel-heading">
                            文字颜色
                        </div>
                        <div class="panel-body">
                            <p>
                                枯藤老树昏鸦，小桥流水人家，古道西风瘦马。夕阳西下，断肠人在天涯。
                            </p>
                            <p class="text-primary">
                                枯藤老树昏鸦，小桥流水人家，古道西风瘦马。夕阳西下，断肠人在天涯。
                                <code>.text-primary</code>
                            </p>
                            <p class="text-success">
                                枯藤老树昏鸦，小桥流水人家，古道西风瘦马。夕阳西下，断肠人在天涯。
                                <code>.text-success</code>
                            </p>
                            <p class="text-info">
                                枯藤老树昏鸦，小桥流水人家，古道西风瘦马。夕阳西下，断肠人在天涯。
                                <code>.text-info</code>
                            </p>
                            <p class="text-warning">
                                枯藤老树昏鸦，小桥流水人家，古道西风瘦马。夕阳西下，断肠人在天涯。
                                <code>.text-warning</code>
                            </p>
                            <p class="text-danger">
                                枯藤老树昏鸦，小桥流水人家，古道西风瘦马。夕阳西下，断肠人在天涯。
                                <code>.text-danger</code>
                            </p>
                            <p class="text-muted">
                                枯藤老树昏鸦，小桥流水人家，古道西风瘦马。夕阳西下，断肠人在天涯。
                                <code>.text-muted</code>
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col-md-12">
                    <div class="panel">
                        <div class="panel-heading">
                            文字对齐
                        </div>
                        <div class="panel-body">
                            <p class="text-left">
                                渭城朝雨浥轻尘，客舍青青柳色新。劝君更尽一杯酒，西出阳关无故人。
                                <code>.text-left</code>
                            </p>
                            <p class="text-center">
                                渭城朝雨浥轻尘，客舍青青柳色新。劝君更尽一杯酒，西出阳关无故人。
                                <code>.text-center</code>
                            </p>
                            <p class="text-right">
                                渭城朝雨浥轻尘，客舍青青柳色新。劝君更尽一杯酒，西出阳关无故人。
                                <code>.text-right</code>
                            </p>
                        </div>
                    </div>
                </div>
                <div class="col-md-12">
                    <div class="panel">
                        <div class="panel-heading">
                            列表样式
                        </div>
                        <div class="panel-body">
                            <div class="row">
                                <div class="col-md-4">
                                    <h5>无样式列表<code>ul.nostyle</code></h5>
                                    <ul class="nostyle">
                                        <li>春种一粒粟，秋收万颗子。</li>
                                        <li>四海无闲田，农夫犹饿死。</li>
                                        <li>锄禾日当午，汗滴禾下土。</li>
                                        <li>谁知盘中餐，粒粒皆辛苦。</li>
                                    </ul>
                                </div>
                                <div class="col-md-4">
                                    <h5>无序列表<code>ul</code></h5>
                                    <ul>
                                        <li>春种一粒粟，秋收万颗子。</li>
                                        <li>四海无闲田，农夫犹饿死。</li>
                                        <li>锄禾日当午，汗滴禾下土。</li>
                                        <li>谁知盘中餐，粒粒皆辛苦。</li>
                                    </ul>
                                </div>
                                <div class="col-md-4">
                                    <h5>有序列表<code>ol</code></h5>
                                    <ol>
                                        <li>春种一粒粟，秋收万颗子。</li>
                                        <li>四海无闲田，农夫犹饿死。</li>
                                        <li>锄禾日当午，汗滴禾下土。</li>
                                        <li>谁知盘中餐，粒粒皆辛苦。</li>
                                    </ol>
                                </div>
                                <div class="col-md-12">
                                    <hr>
                                    <h5>内联列表<code>.list-inline</code></h5>
                                    <ul class="list-inline">
                                        <li>春种一粒粟，秋收万颗子。</li>
                                        <li>四海无闲田，农夫犹饿死。</li>
                                        <li>锄禾日当午，汗滴禾下土。</li>
                                        <li>谁知盘中餐，粒粒皆辛苦。</li>
                                    </ul>
                                </div>

                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-12">
                    <div class="panel">
                        <div class="panel-heading">
                            其他相关
                        </div>
                        <div class="panel-body">
                            <div class="row">
                                <div class="col-md-4">
                                    <h5>改变大小写</h5>
                                    <p class="text-lowercase">Lowercased text<code>.text-lowercase</code></p>
                                    <p class="text-uppercase">Uppercased text<code>.text-uppercase</code></p>
                                    <p class="text-capitalize">Capitalized text<code>.text-capitalize</code></p>
                                </div>
                                <div class="col-md-4">
                                    <h5>基本缩略语</h5>
                                    attribute的缩略词是<abbr title="attribute">attr</abbr>
                                    <h5>首字母缩略语</h5>
                                    <abbr title="HyperText Markup Language" class="initialism">HTML</abbr>的全称是HyperText
                                    Markup Language
                                </div>
                                <div class="col-md-4">
                                    <h5>地址<code>address</code></h5>
                                    <address>
                                        <strong>xx信息技术有限公司</strong>
                                        <br>
                                        XX市XX区xxx街道xxx号
                                        <br>
                                        <abbr title="Phone">Tel:</abbr>(8888)8888888
                                        <br>
                                        <a href="mailto:#">xxx@163.net</a>
                                    </address>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md-12">
                                    <hr>
                                </div>
                                <div class="col-md-6">
                                    <h5>描述</h5>
                                    <dl>
                                        <dt>送元二使安西</dt>
                                        <dd>渭城朝雨浥轻尘，客舍青青柳色新。劝君更尽一杯酒，西出阳关无故人。</dd>
                                        <dt>黄鹤楼送孟浩然之广陵</dt>
                                        <dd>故人西辞黄鹤楼，烟花三月下扬州。孤帆远影碧空尽，唯见长江天际流。</dd>
                                    </dl>
                                </div>
                                <div class="col-md-6">
                                    <h5>水平描述<code>.dl-horizontal</code></h5>
                                    <dl class="dl-horizontal">
                                        <dt>悯农</dt>
                                        <dd>锄禾日当午，汗滴禾下土。谁知盘中餐，粒粒皆辛苦。</dd>
                                        <dt>静夜思</dt>
                                        <dd>床前明月光，疑是地上霜。举头望明月，低头思故乡。</dd>
                                    </dl>
                                </div>
                                <div class="col-md-12">
                                    <div class="col-md-12">
                                        <hr>
                                    </div>
                                    <dl class="row">
                                        <dt class="col-xs-3">春夜喜雨</dt>
                                        <dd class="col-xs-9">好雨知时节，当春乃发生。随风潜入夜，润物细无声。野径云俱黑，江船火独明。晓看红湿处，花重锦官城。</dd>
                                        <dt class="col-xs-3">断章</dt>
                                        <dd class="col-xs-9">你站在桥上看风景，看风景人在楼上看你。明月装饰了你的窗子，你装饰了别人的梦。</dd>
                                        <dt class="col-xs-3">望天门山</dt>
                                        <dd class="col-xs-9">天门中断楚江开，碧水东流至此回。两岸青山相对出，孤帆一片日边来。</dd>
                                    </dl>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-12">
                    <div class="panel">
                        <div class="panel-heading">
                            引用样式<code>blockquote</code>
                        </div>
                        <div class="panel-body">
                            <div class="row">
                                <div class="col-md-6">
                                    <blockquote>
                                        <p>默认字体引用</p>
                                        <small>赵佳佳<cite>《引用样式》</cite></small>
                                    </blockquote>
                                    <blockquote class="bq-primary">
                                        <H2>H2字体引用<code>.bq-primary</code></H2>
                                        <small>赵佳佳<cite>《引用样式》</cite></small>
                                    </blockquote>
                                    <blockquote class="bq-success">
                                        <H3>H3字体引用<code>.bq-success</code></H3>
                                        <small>赵佳佳<cite>《引用样式》</cite></small>
                                    </blockquote>
                                </div>
                                <div class="col-md-6">
                                    <blockquote class="bq-info">
                                        <H4>H4字体引用<code>.bq-info</code></H4>
                                        <small>赵佳佳<cite>《引用样式》</cite></small>
                                    </blockquote>
                                    <blockquote class="bq-warning">
                                        <H5>H5字体引用<code>.bq-warning</code></H5>
                                        <small>赵佳佳<cite>《引用样式》</cite></small>
                                    </blockquote>
                                    <blockquote class="bq-danger">
                                        <H6>H6字体引用<code>.bq-danger</code></H6>
                                        <small>赵佳佳<cite>《引用样式》</cite></small>
                                    </blockquote>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="./../../../static/js/include/_include-js.js"></script>
</body>

</html>